<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Delete } from '@element-plus/icons-vue';
  import { pageCategory } from '/@/api/businessResource';
  import CategoryDialog from './CategoryDialog.vue';

  const dialog = ref();
  const tableRef = ref();
  const state = reactive({
    loading: false,
  });

  const table = reactive({
    data: [],
    selected: [] as any,
  });

  const tableActions = {
    async getList() {
      state.loading = true;
      let params = {
        pageNum: pg.current,
        pageSize: pg.size,
      };
      let { data } = await pageCategory(params);
      state.loading = false;
      table.data = data.list;
      pg.total = data.total;
      table.selected = [];
    },
    selectionChange(v) {
      table.selected = v;
    },
    currentChange(val) {
      emit('current-change', val);
    },
  };

  const pg = reactive({
    current: 1,
    size: 20,
    total: 0,
  });

  const pgActions = {
    resetPg: () => {
      pg.current = 1;
      pg.size = 20;
      pg.total = 0;
    },
    currentChange(r) {
      pg.current = r;
      tableActions.getList();
    },
    sizeChange(r) {
      pg.current = 1;
      pg.size = r;
      tableActions.getList();
    },
  };

  const dataActions = {
    add: () => {
      dialog.value.openDialog();
    },
    edit: (row: any) => {
      dialog.value.openDialog(row);
    },
  };

  const emit = defineEmits(['current-change']);

  const clearSelection = () => {
    tableRef.value!.setCurrentRow();
  };

  tableActions.getList();

  defineExpose({ clearSelection });
</script>

<template>
  <div class="category-wrapper">
    <div class="title">业务类型</div>
    <div class="tool">
      <el-button type="primary" @click="dataActions.add">新建</el-button>
      <el-button :icon="Delete" :disabled="table.selected.length == 0">批量删除</el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="table.data"
      highlight-current-row
      style="width: 100%; margin: 15px 0"
      @current-change="tableActions.currentChange"
      @selection-change="tableActions.selectionChange"
      v-loading="state.loading"
    >
      <el-table-column type="selection" width="30" />
      <el-table-column prop="name" label="资源名称" />
      <el-table-column prop="code" label="资源编码" />
      <el-table-column prop="busKey" label="业务Key" show-overflow-tooltip />
      <el-table-column prop="address" label="操作" width="110">
        <template #default="{ row }">
          <el-button type="primary" link @click="dataActions.edit(row)">编辑</el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-end"
      background
      layout="total, sizes, prev, pager, next"
      :total="pg.total"
      :current-page="pg.current"
      @size-change="pgActions.sizeChange"
      v-model:page-size="pg.size"
      @current-change="pgActions.currentChange"
      :page-sizes="[20, 30, 50]"
    />
    <CategoryDialog ref="dialog" @success="tableActions.getList" />
  </div>
</template>

<style lang="less" scoped>
  html[data-theme='light'] {
    .dict-type {
      background-color: #fff;
    }
  }

  html[data-theme='dark'] {
    .dict-type {
      background-color: #000;
    }
  }

  .category-wrapper {
    background: #fff;
    width: 35%;
    // height: calc(100vh - 120px);
    padding: 15px;
  }
  .title {
    font-size: 18px;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #262626;
  }
  .tool {
    display: flex;
    justify-content: flex-end;
  }
</style>
